<template>
  <div class="suPane">
    <div class="suTitle">
      <div class="el-icon-user-solid">蔬菜供应商</div>
    </div>
    <div class="suInfo" v-for="(supplier,index) in suppliers"><a href="/public/supplier" title="点击查看详情">
      <img :src="getImgsrc(supplier.suimg)" @mouseenter="enlargeimg(index)" @mouseleave="narrowimg(index)"/></a>
      <div class="suInfodesc" @mouseenter="shadow(index)" @mouseleave="noshadow(index)">
        <span> {{ supplier.sudesc}} </span>
      </div>
    </div>
  </div>

</template>

<script>
  import api from "../../../axios/api";

  export default {
    name: "supplier",
    data(){
      return{
        suppliers:[]
      }
    },
    methods:{
      narrowimg(index){
        $($(".suInfo img")[index]).css("transform","scale(1)");
      },
      enlargeimg(index){
        $($(".suInfo img")[index]).css("transform","scale(1.1)");
      },
      shadow(index){
        // alert("11")
        $($(".suInfodesc")[index]).css("box-shadow","0px 10px 10px -10px #c4c4c4 ");
      },
      noshadow(index){
        // alert("11")
        $($(".suInfodesc")[index]).css("box-shadow","0 0 0 ");
      },
      getImgsrc: function (imgsrc) {
        return "../../../../static/images/supplier/" + imgsrc;
      },
      getSu: function () {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/supplier", null, "post")
          .then(res => {
            this.suppliers = res;
            console.log(res)

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

    },
    created() {
     this.getSu();
    }
  }
</script>

<style scoped lang="stylus">
  .suPane
    width 1010px
    height 280px
    margin 0 auto
    content: ""
    display: block
    clear: both

   .suTitle
    font-size 17px
    width 120px
    height 24px

    .el-icon-user-solid
      font-weight 600

   .suInfo
    overflow hidden
    position relative
    margin 15px 0 0 0
    float: left
    margin-right 11px
    width 325px
    height 230px

    .suInfodesc
      transition: all 0.6s;
      margin 0 auto
      font-size 18px
      position center
      text-align center
      //text-indent: 6em
      position absolute
      z-index 3
      width 325px
      height 70px
      top 190px
      color #000000
      opacity:0.8
      border-radius  0 0 5px 5px

    img
     transition: all 0.6s;
     padding 0
     width 325px
     height 180px
     border-radius 5px 5px 0 0


</style>
